<template>
  <div class="app-container">
    <div class="search">
      <el-form ref="form" :model="search" :inline="true">
        <el-form-item label="人员搜索：">
          <el-input
            v-model="search.userName"
            clearable
            placeholder="请输入"
            size="medium"
          />
        </el-form-item>
        <el-form-item label="角色：">
          <el-select v-model="search.roleId" clearable placeholder="请选择" size="medium">
            <el-option
              v-for="item in roleList"
              :key="item.roleId"
              :label="item.roleName"
              :value="item.roleId"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="medium"
            class="my-primary1"
            icon="el-icon-search"
            @click="query"
          >查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="result">
      <el-table
        :data="tableData"
        style="width: 100%"
        empty-text="暂无数据"
        fit
        highlight-current-row
        :cell-style="{
          height: '44px',
          padding: '2px 0px',
          textAlign: 'left',
          color: 'rgb(102, 102, 102)',
          borderBottom: 'none',
        }"
        :header-cell-style="{
          lineHeight: 1.15,
          padding: '10px 0px 9px',
          background: 'rgb(243, 246, 251)',
          fontWeight: 500,
          textAlign: 'left',
          color: 'rgb(102, 102, 102)',
          borderBottom: 'none',
        }"
      >
        <el-table-column
          type="index"
          :index="(index) => (search.pageIndex - 1) * 10 + (index + 1)"
          label="序号"
          width="80px"
        />
        <el-table-column label="人员名称" prop="userName" />
        <el-table-column label="角色" prop="roleName" />
        <el-table-column label="联系电话" prop="mobile" />
        <el-table-column label="完成工单(本月)" prop="workCount" />
        <el-table-column label="进行中工单" prop="progressTotal" />
        <el-table-column label="拒绝工单" prop="cancelCount" />
        <el-table-column label="操作" width="120">
          <template v-slot="{ row }">
            <el-button
              type="text"
              class="el-button--primary-text"
              @click.native="showVmInfo(row.userId)"
            >
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          layout="slot,prev,next"
          :current-page.sync="search.pageIndex"
          :total="totalCount"
          :page-size="search.pageSize"
          prev-text="上一页"
          next-text="下一页"
          @current-change="userSearch"
        >
          <template order="-1">
            <span
              class="el-pagination__total"
            >共{{ totalCount }}条记录 第 {{ search.pageIndex }}/{{
              totalPage
            }}
              页</span>
          </template>
        </el-pagination>
      </div>
    </div>
    <el-dialog
      title="人员详情"
      :visible.sync="userInfoDialog"
      width="630px"
      @close="userInfoClose"
    >
      <div style="width: 579px; min-height: 277px; margin: 0px auto;">
        <el-row class="user-info">
          <el-col :span="9">
            人员名称：{{ userInfo.userName }}
          </el-col>
          <el-col :span="7">
            角色：{{ userInfo.roleName }}
          </el-col>
          <el-col :span="8">
            联系电话：{{ userInfo.mobile }}
          </el-col>
          <el-col :span="24" class="region-name">
            负责区域：{{ userInfo.regionName }}
          </el-col>
        </el-row>
        <el-row class="user-work">
          <el-col class="item" :span="5">
             &nbsp;
          </el-col>
          <el-col class="item" :span="5">
            总工单数
          </el-col>
          <el-col class="item" :span="5">
            拒绝工单
          </el-col>
          <el-col class="item" :span="5">
            完成工单
          </el-col>
          <el-col class="item" :span="5">
            进行中工单
          </el-col>
        </el-row>
        <el-row class="user-work">
          <el-col class="item" :span="5">
            本周
          </el-col>
          <el-col class="item" :span="5">
            {{ weekData.total }}
          </el-col>
          <el-col class="item" :span="5">
            {{ weekData.cancelCount }}
          </el-col>
          <el-col class="item" :span="5">
            {{ weekData.workCount }}
          </el-col>
          <el-col class="item" :span="5">
            {{ weekData.progressTotal }}
          </el-col>
        </el-row>
        <el-row class="user-work">
          <el-col class="item" :span="5">
            本月
          </el-col>
          <el-col class="item" :span="5">
            {{ monthData.total }}
          </el-col>
          <el-col class="item" :span="5">
            {{ monthData.cancelCount }}
          </el-col>
          <el-col class="item" :span="5">
            {{ monthData.workCount }}
          </el-col>
          <el-col class="item" :span="5">
            {{ monthData.progressTotal }}
          </el-col>
        </el-row>
        <el-row class="user-work">
          <el-col class="item" :span="5">
            本年
          </el-col>
          <el-col class="item" :span="5">
            {{ yearData.total }}
          </el-col>
          <el-col class="item" :span="5">
            {{ yearData.cancelCount }}
          </el-col>
          <el-col class="item" :span="5">
            {{ yearData.workCount }}
          </el-col>
          <el-col class="item" :span="5">
            {{ yearData.progressTotal }}
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getRoleList, getUserWork, getUserWorkInfo, getUserInfo } from '@/api/user'
export default {
  data() {
    return {
      search: {
        userName: '',
        roleId: null,
        pageIndex: 1,
        pageSize: 10
      },
      tableData: [],
      totalCount: 0,
      totalPage: 0,
      roleList: [],
      userInfoDialog: false,
      weekData: [],
      monthData: [],
      yearData: [],
      userInfo: {}
    }
  },
  computed: {
    today() {
      // 获取当前日期字符串
      return new Date()
        .toLocaleDateString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit'
        })
        .replace(/\//g, '-')
    },
    firstDayOfMonth() {
      const today = new Date()
      // 获取本月第一天字符串
      return new Date(today.getFullYear(), today.getMonth(), 1)
        .toLocaleDateString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit'
        })
        .replace(/\//g, '-')
    },
    firstDayOfWeek() {
      const today = new Date()
      const dayOfWeek = today.getDay()
      const daysToMonday = (7 - dayOfWeek) % 7
      // 获取本周第一天字符串
      return new Date(today.setDate(today.getDate() + daysToMonday - 6))
        .toLocaleDateString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit'
        })
        .replace(/\//g, '-')
    },
    firstDayOfYear() {
      const today = new Date()
      // 获取本年第一天字符串
      return new Date(today.getFullYear(), 0, 1)
        .toLocaleDateString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit'
        })
        .replace(/\//g, '-')
    }
  },
  async created() {
    await this.userSearch()
    this.getRoleList()
  },
  methods: {
    query() {
      this.search.pageIndex = 1
      this.userSearch()
    },
    async userSearch() {
      const { currentPageRecords, totalCount, totalPage } = await getUserWork({
        ...this.search
      })
      this.totalCount = parseInt(totalCount)
      this.totalPage = totalPage
      this.tableData = currentPageRecords
    },
    async getRoleList() {
      this.roleList = await getRoleList()
    },
    formattedDate(date) {
      const currentDate = new Date(date)
      const year = currentDate.getFullYear()
      const month = ('0' + (currentDate.getMonth() + 1)).slice(-2)
      const day = ('0' + currentDate.getDate()).slice(-2)
      const hours = ('0' + currentDate.getHours()).slice(-2)
      const minutes = ('0' + currentDate.getMinutes()).slice(-2)
      const seconds = ('0' + currentDate.getSeconds()).slice(-2)
      return `${year}.${month}.${day} ${hours}:${minutes}:${seconds}`
    },
    async showVmInfo(userId) {
      this.userInfoDialog = true
      this.userInfo = await getUserInfo(userId)
      this.weekData = await getUserWorkInfo({
        start: this.firstDayOfWeek + ' 00:00:00',
        end: this.today + ' 23:59:59',
        userId
      })
      this.monthData = await getUserWorkInfo({
        start: this.firstDayOfMonth + ' 00:00:00',
        end: this.today + ' 23:59:59',
        userId
      })
      this.yearData = await getUserWorkInfo({
        start: this.firstDayOfYear + ' 00:00:00',
        end: this.today + ' 23:59:59',
        userId
      })
    },
    userInfoClose() {
      this.userInfoDialog = false
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/common.scss";
.user-info {
    height: 86px;
    padding: 19px 19px 0;
    background: #f3f6fb
}

.user-info .region-name {
    margin-top: 15px
}

.user-work {
    border-top: 1px solid #d8dde3;
    border-left: 1px solid #d8dde3
}

.user-work .item {
    line-height: 40px;
    border-right: 1px solid #d8dde3;
    text-align: center
}

.user-work:nth-child(2) {
    margin-top: 26px;
    background: #f7f8fd
}

.user-work:last-child {
    border-bottom: 1px solid #d8dde3
}
</style>
